<template>
    <div class="product-details">
        <div class="product-details_image" v-if="!!product">
            <img :src="product.image" alt="" class="image" />
            <div class="product-detail_info">
                <div class="product-details_description">
                    <small>{{ product.manufacturer.name }}</small>
                    <h3>{{ product.name }}</h3>
                    <p>{{ product.description }}</p>
                </div>
                <div class="product-details_price-cart">
                    <p>{{ product.price }}</p>
                    <product-button :product="product"></product-button>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
.product-details_image .image {
    width: 100px;
    height: 100px;
}
</style>

<script>
import ProductButtonVue from './ProductButton.vue'
export default {
    props: ['product'],
    components: {
        'product-button': ProductButtonVue
    }
}
</script>
